<template>
	<u-popup :show="show" @close="close" mode="center" overlayOpacity="0.7" round="10">
		<view class="medal-detail m-b-30">
			<view class="text-center m-b-20">
				<image src="" class="medal-icon"></image>
			</view>
			<view class="text-center white f-s medal-des"></view>
		</view>
		<view class="text-center flex-no-horizontal close">
			<u-icon name="close-circle" color="#ffffff" size="24"></u-icon>
		</view>
	</u-popup>
</template>

<script>
	export default{
		props: {
			show: {
				type: Boolean,
				default() {
					return false
				}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	::v-deep.u-popup__content{
		background-color: #fff0;
	}
	.medal-detail{
		width: 624rpx;
		padding: 35rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		.medal-icon{
			width: 224rpx;
			height: 256rpx;
		}
		.medal-des{
			line-height: 50rpx;
		}
	}
	.close{
		justify-content: center;
	}
</style>
